<template>
	<view class="checkPhone" v-if="!nextTips">
		<uni-forms :modelValue="checkForm" :label-width="150">
			<view>
				<uni-forms-item name="name" label="当前手机号:">
					<input type="number" maxlength="11" v-model="checkForm.oldMobile" class="label-right" disabled placeholder="请输入手机号" />
				</uni-forms-item>
			</view>
			<uni-forms-item name="code" label="验证码:">
				<view class="flex">
					<input type="number" maxlength="6" v-model="checkForm.oldCode" class="label-right inlineBlock" placeholder="请输入验证码" />
					<text v-if="sendMsg" class="code-icon" @click="getMsg">获取验证码</text>
					<text v-if="!sendMsg" class="message-info">重新发送 {{seconds1}}s</text>
				</view>
			</uni-forms-item>
		</uni-forms>
		<button class="submit btn-primary" :disabled="!checkForm.oldCode" @click="checkPhone">下一步</button>
	</view>
	<view class="checkPhone" v-else>
		<uni-forms :modelValue="formData" :label-width="150">
			<view class="check-item">
				<uni-forms-item name="name" label="更换后的手机号:">
					<input type="number" maxlength="11" v-model="formData.mobile" class="label-right" placeholder="请输入手机号" />
				</uni-forms-item>
				<view class="check-tips">注意: 如该手机号已在系统注册则不能更换手机号</view>
			</view>
			<uni-forms-item name="code" label="验证码:">
				<view class="flex">
					<input type="number" maxlength="6" v-model="formData.code" class="label-right" placeholder="请输入验证码" />
					<text v-if="sendNewMsg" class="code-icon" @click="getNewMsg">获取验证码</text>
					<text v-if="!sendNewMsg" class="message-info">重新发送验证码 {{seconds2}}s</text>
				</view>
			</uni-forms-item>
		</uni-forms>
		<button class="submit btn-primary" :disabled="!checkForm.oldCode" @click="submitForm">提交</button>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { updateMobile } from '@/common/API/member'
	import { getCode } from '@/common/API/login'
	import { useStore } from 'vuex'
	const store = useStore()
	const formData = reactive({
		mobile:'',
		code:''
	})
	const checkForm = reactive({
		oldMobile:uni.getStorageSync('userPhone'),
		oldCode: ''
	})
	const sendMsg = ref(true)//发送验证码
	const seconds1 = ref(60)
	const seconds2 = ref(60)
	const nextTips = ref(false)//显示下一步
	const sendNewMsg = ref(true)
	//获取验证码
	const getMsg = async (val) => {
		if(!checkForm.oldMobile){
			uni.showToast({
				title:'请输入当前手机号',
				icon:'none'
			})
			return
		}
		let data = {
			mobile: checkForm.oldMobile,
			scene: 3
		};
		uni.showLoading();
		let res = await getCode(data)
		uni.hideLoading();
		sendMsg.value = false
		setTimer(seconds1, sendMsg)
	}
	//获取验证码
	const getNewMsg = async (val) => {
		if(!formData.mobile){
			uni.showToast({
				title:'请输入更换后的手机号',
				icon:'none'
			})
			return
		}
		let data = {
			mobile: formData.mobile,
			scene: 3
		};
		uni.showLoading();
		let res = await getCode(data)
		uni.hideLoading();
		sendNewMsg.value = false
		setTimer(seconds2, sendNewMsg)
	}
	//下一步
	const checkPhone = () => {
		nextTips.value = true
	}
	//提交
	const submitForm = async () => {
		if(!formData.mobile){
			uni.showToast({
				title:'请输入更换后的手机号',
				icon:'none'
			})
			return
		}else if(!formData.code){
			uni.showToast({
				title:'请输入验证码',
				icon:'none'
			})
			return
		}
		let data = {
			mobile: formData.mobile,
			code: formData.code,
			oldMobile: checkForm.oldMobile,
			oldCode: checkForm.oldCode
		}
		let res = await updateMobile(data)
		uni.showToast({
		  title: "更换成功"
		})
		setTimeout(()=>{
			store.dispatch('logOut');
			uni.redirectTo({
				url:'/pages/login/login'
			})
		},2000)
	}
	
	const setTimer = (val, view) => {
		let holdTime = 60;
		const Timer = setInterval(() => {
			if (holdTime <= 0) {
				view.value = true
				clearInterval(Timer);
				return;
			}
			holdTime--;
			val.value =  holdTime
		}, 1000)
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
.checkPhone{
	padding: 0 32rpx 16rpx 32rpx;
	
	.uni-forms-item{
		border-bottom: 2rpx solid #f5f5f5;
		margin: 0;
		height: 108rpx;
		display: flex;
		align-items: center;
		.label-right{
			text-align: right;
		}
		::v-deep.uni-forms-item__label{
			color: rgba(77, 77, 77, 1);
			font-size: 32rpx;
		}
		.label-right{
			vertical-align: text-bottom;
			width: 100%;
		}
	}
	::v-deep.uni-forms-item__content{
		display: flex;
		align-items: center;
	}
	.check-item{
		position: relative;
		::v-deep.uni-forms-item{
			height: 140rpx;
			padding: 30rpx 0 40rpx;
			margin: 0;
		}
	}
	.check-tips{
		font-size: 24rpx;
		color: rgba(237, 50, 50, 1);
		position: absolute;
		bottom: 10rpx;
	}
	.code-icon{
		color: $uni-color-primary;
		text-align: right;
		width: 190rpx;
		font-size: 24rpx;
	}
	.input-placeholder{
		color: rgba(204, 204, 204, 1);
	}
	.submit{
		width: 686rpx;
		margin: 684rpx 0 16rpx 0;
	}
	.message-info{
		text-align: right;
		color: $uni-color-primary;
		font-size: 24rpx;
		width: 240rpx;
	}
}
</style>